<template>
  <div>
        <!-- 
            v-model 的修饰符
            1. v-model.number 将输入框中的值以 parseFloat 的形式转化为数字类型  (常用)
                会自动清除后续非数字部分
                如果第一个数字就不是数字时，.number修饰符就失效了
            2. v-model.trim 去除首尾空格 (常用)
            3. v-model.lazy 将input（输入）时触发的实时更新数据操作转移到change（失焦、回车）时触发 (一般不用)
         -->

        <span>转化数字</span>
        <input type="text" v-model.number="newNum">
        <hr>

        <span>取消前后空格</span>
        <input type="text" v-model.trim="newTrim">
        <hr>

        <span>懒更新</span>
        <input type="text" v-model.lazy="newLazy">
        <hr>
  </div>
</template>

<script>
export default {
    name: 'DemoIndex5',
    data() {
        return {
            newNum: '',
            newTrim: '',
            newLazy: ''
        }
    },
}
</script>

<style scoped>
    span {
        display: inline-block;
        width: 100px;
        color: pink;
    }
</style>